<ui:composition template="/templates/default.xhtml"
				xmlns="http://www.w3.org/1999/xhtml"
				xmlns:h="http://java.sun.com/jsf/html"
				xmlns:f="http://java.sun.com/jsf/core"
				xmlns:ui="http://java.sun.com/jsf/facelets"
				xmlns:o="http://openfaces.org/"
				xmlns:c="http://java.sun.com/jstl/core"
				xmlns:sec="http://www.springframework.org/security/facelets/tags">

	<ui:define name="title">OpenHDS - Baseline</ui:define>

	<ui:define name="display">
    	<sec:ifNotGranted roles="ACCESS_BASELINE">
    		<h1>#{msg.accessDenied}</h1>
    		<p>#{msg.accessDeniedException}</p>
    	</sec:ifNotGranted>
    	
    	<sec:ifAllGranted roles="ACCESS_BASELINE">
		    <style>
		        .update-individual-table {
		            border-collapse: collapse;
		            width:100%;
		        }
		
		        .update-individual-table th {
		            background-color: #A7C942;
		            text-align:center;
		            color: white;
		            padding:5px 7px 4px;
		        }
		
		        .update-individual-table td {
		            border:1px solid #98BF21;
		            padding:5px 5px 5px;
		            text-align:center;
		        }
		
		        .update-individual-table a {
		            text-decoration:underline;
		        }
		
		        .update-individual-table .alt {
		            background-color:#CCC;
		        }
		
		        .update-individual-table .select-col {
		            width:30%;
		            text-align:center;
		        }
		
		        .list-individual-operation-table {
		            border-collapse: collapse;
		            border:1px solid #AAA;
		            width:100%;
		        }
		    </style>
		    
		    <h:outputText value="#{navController.breadcrumbTrail}" />
		    
	        <h1><h:outputText value="#{msg.baselineName}" /></h1>
	        <h:messages id="errors" globalOnly="true" />
	        <h:form id="form">
	
	            <c:if test="#{flowScope.step >= 0}">
	                <table>
	                    <tr>
	                        <td><h:outputText value="#{msg.fieldWorkerId}:" /></td>
	                        <td>
	                            <h:inputText styleClass="collectedBy" autocomplete="off" id="fieldWorkerExtId" value="#{baselineFlowBean.collectedBy}" converter="#{fieldWorkerExtIdConverter}" disabled="#{baselineFlowBean.collectedBy != null}"/>
	                            <script>document.getElementById('form:fieldWorkerExtId').focus();</script>
	                            <h:message for="fieldWorkerExtId" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
	                        </td>
	                    </tr>
	                    <tr>
	                        <td><h:outputText value="#{msg.baselineEntryDate} (#{siteProperties.dateFormat})" /></td>
	                        <td>
	                        	<o:dateChooser id="entryDate" value="#{baselineFlowBean.entryDate}" pattern="#{siteProperties.dateFormat}" disabled="#{flowScope.step gt 0}" validator="#{checkMinimumEnumerationDate.validate}"/>
	                            <h:message for="entryDate" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
	                        </td>
	                    </tr>
	                </table>
	            </c:if>
	            <br />
	            <h:commandButton id="selectBtn" value="#{msg.lblSelect}" action="setFWAndDate" rendered="#{flowScope.step == 0}"/>
	
	            <c:if test="#{flowScope.step >= 1 and flowScope.updatingBaseline}">
	                <h3>#{msg.navBarLocation}</h3>
	                <table>
	                    <tr>
	                        <td>#{msg.locationId}:</td>
	                        <td>
	                            <h:inputText styleClass="location" autocomplete="off" id="locationExtId" value="#{baselineFlowBean.currentLocation}" disabled="#{baselineFlowBean.currentLocation != null}" converter="#{locationExtIdConverter}" />
	                            <script>document.getElementById('form:locationExtId').focus();</script>
	                            <h:message for="locationExtId" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
	                        </td>
	                    </tr>
	                    <tr>
	                        <td>#{msg.locationName}:</td>
	                        <td>
	                            <h:inputText disabled="true" value="#{baselineFlowBean.currentLocation.locationName}" />
	                            <h:commandButton id="locationSelectBtn" value="#{msg.lblSelect}" rendered="#{baselineFlowBean.currentLocation == null}" action="setLocation" />
	                            <h:commandButton immediate="true" value="#{msg.lblCreate}" rendered="#{baselineFlowBean.currentLocation == null}" action="newLocation" />
	                        </td>
	                    </tr>
	                </table>
	            </c:if>
	            <br />
	
	            <c:if test="#{flowScope.step >= 2}"> 
	                <h3>#{msg.navBarSocialGroup}</h3>
	                <table>
	                    <tr>
	                        <td><h:outputText value="#{msg.socialGroupId}:"/></td>
	                        <td>
	                            <h:inputText styleClass="socialGroup" autocomplete="off" id="socialGroupExtId" value="#{baselineFlowBean.currentSocialGroup}" converter="#{socialGroupExtIdConverter}" disabled="#{baselineFlowBean.currentSocialGroup != null}"/>
	                            <script>document.getElementById('form:socialGroupExtId').focus();</script>
	                            <h:message for="socialGroupExtId" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
	                        </td>
	                    </tr>
	                    <tr>
	                        <td><h:outputText value="#{msg.socialGroupName}:"/></td>
	                        <td>
	                            <h:inputText id="socialGroupName" value="#{baselineFlowBean.currentSocialGroup.groupName}" converter="#{defaultConverter}" disabled="true" />
	                            <h:commandButton id="socialGroupBtn" rendered="#{baselineFlowBean.currentSocialGroup == null}" value="#{msg.lblSelect}" action="setSocialGroup"/>
	                            <h:commandButton immediate="true" rendered="#{baselineFlowBean.currentSocialGroup == null}" value="#{msg.lblCreate}" action="newSocialGroup" />
	                        </td>
	                    </tr>
	                </table>
	            </c:if>
	            <br />
	
	            <c:if test="#{flowScope.step >= 3}"> 
	                <h3>#{msg.baselineListIndividuals}</h3>
	                <table class="list-individual-operation-table">
	                    <tr style="height:50px">
	                        <td rowspan="2" style="width:60%" valign="top">
	                            <c:if test="#{baselineFlowBean.sizeOfIndividualsAtLocation == 0}" >
	                                <h:outputText value="#{msg.individualEmpty}" />
	                            </c:if>
	                            <h:dataTable styleClass="update-individual-table"
	                                         value="#{baselineFlowBean.individualsAtLocation}"
	                                         var="indiv" width="100%" rowClasses=",alt"
	                                         columnClasses=",,select-col" rendered="#{baselineFlowBean.sizeOfIndividualsAtLocation > 0}">
	                                <h:column>
	                                    <f:facet name="header">
	                                        <h:outputText value="#{msg.individualId}" />
	                                    </f:facet>
	                                    <h:outputText value="#{indiv.extId}" />
	                                </h:column>
	                                <h:column>
	                                  <f:facet name="header">
	                                  	<h:outputText value="#{msg.individualFullName}" />
	                            		 </f:facet>
	                             	  <h:outputText value="#{indiv.firstName} #{indiv.lastName}" />
	                                </h:column>
	                                <h:column>
	                                    <f:facet name="header">
	                                        <h:outputText value="#{msg.individualDob}" />
	                                    </f:facet>
	                                    <h:outputText value="#{indiv.dob}" converter="#{calendarConverter}" />
	                                </h:column>
	                                <h:column>
	                                    <f:facet name="header">
	                                        <h:outputText value="#{msg.baselineLastEvent}" />
	                                    </f:facet>
	                                    <h:outputText value="#{individualService.jsfcrud_method.getLatestEvent.jsfcrud_params[indiv].jsfcrud_invoke}" />
	                                </h:column>
	                                <h:column>
	                                    <f:facet name="header">
	                                    </f:facet>
	                                    <h:commandLink immediate="true" value="#{msg.lblSelect}" action="setIndividual">
	                                        <f:param name="indivId" value="#{indiv.uuid}" />
	                                    </h:commandLink>
	                                </h:column>
	                            </h:dataTable>
	                        </td>
	                    </tr>
	                    <tr>
	                        <td align="center">
	                            <h:commandButton id="addIndividual" immediate="true" value="#{msg.baselineAddIndividual}" action="addIndividual" />
	                            <script>
	                            	document.getElementById('form:addIndividual').focus();
	                            </script>
	                        </td>
	                    </tr>
	                </table>
	            </c:if>
	
	            <br />
	
	            <c:if test="#{flowScope.step >= 3}"> 
	                <h3>#{msg.baselineRelationshipsToHead}: #{baselineFlowBean.currentSocialGroup.groupHead.extId}</h3>
	
	                <table class="list-individual-operation-table" width="100%" >
	                    <tr>
	                        <td rowspan="2" style="width:60%" valign="top">
	                            <c:if test="#{baselineFlowBean.membershipListSize == 0}" >
	                                <h:outputText value="#{msg.membershipEmpty}" />
	                            </c:if>
	                            <h:dataTable styleClass="update-individual-table"
	                                         value="#{baselineFlowBean.membershipsAtLocation}"
	                                         var="mem" width="100%" align="center"
	                                         rowClasses=",alt" columnClasses=",select-col" rendered="#{baselineFlowBean.membershipListSize > 0}">
	                                <h:column>
	                                    <f:facet name="header">
	                                        <h:outputText value="#{msg.individualId}" />
	                                    </f:facet>
	                                    <h:outputText value="#{mem.individual.extId}" />
	                                </h:column>
	                                <h:column>
	                                  <f:facet name="header">
	                                  	<h:outputText value="#{msg.individualFullName}" />
	                            		 </f:facet>
	                             	  <h:outputText value="#{mem.individual.firstName} #{mem.individual.lastName}" />
	                                </h:column>
			                	 	<h:column>
			                           	<f:facet name="header">
			                           		<h:panelGroup>
			                           			<h:outputText value="#{msg.navBarRelationship}" /> <br />
			                           			<img class="clickable" onclick="O$('popupWindowForRelationship').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
			                           		</h:panelGroup>
			                               </f:facet>
			                           	<h:outputText value="#{mem.bIsToA}" />
			                        </h:column>   
	                                <h:column>
	                                    <f:facet name="header">
	                                        <h:outputText value="#{msg.membershipStartDate}" />
	                                    </f:facet>
	                                    <h:outputText value="#{mem.startDate}" converter="#{calendarConverter}" />
	                                </h:column> 
	                            </h:dataTable>
	                        </td>
	                        <td colspan="2">
	                            #{msg.baselineSelectedIndividual} <strong><h:outputText value="#{baselineFlowBean.selectedIndividual.extId}" /></strong>
	                            <br />
	                            <center>
	                                <h:commandButton rendered="#{baselineFlowBean.selectedIndividual != null}" value="#{msg.baselineClearSelectedIndividual}" action="clearIndividual" />
	                            </center>
	                        </td>
	                    </tr>
	                    <tr>
	                        <td align="center"><h:commandButton value="#{msg.baselineAddMembership}" action="addMembership"/></td>
	                    </tr>
	                </table>
	            </c:if>
	            <br />
	            <h:commandButton id="finishBtn" immediate="true" value="#{msg.lblFinish}" action="finish" rendered="#{flowScope.updatingBaseline}" />
	        </h:form>
        </sec:ifAllGranted>
	</ui:define>
</ui:composition>